import { ExtendCalendarProps, ExtendCalendarPropsType } from '../extend-calendar.props';
import { SetupContext, Ref } from 'vue';
export default function (
    props: ExtendCalendarPropsType,
    context: SetupContext,
    dateTask:Ref
) {
    const addZero = (n:number) =>{
        if(n>=10){
            return n
        }else{
            return '0'+n
        }
    }
    const getHours = (d:Date | string):string =>{
        let ndate = new Date(d);
        let h = ndate.getHours();
        let m = ndate.getMinutes();
        let datestr = `${addZero(h)}:${addZero(m)}`
        return datestr;
    }
    return () => {
        return <>
            <div class='f-extend-calendar-task'>
                {
                    dateTask.value?.task?.task.map((item:any)=>{
                        let statusClassName = 'f-extend-calendar-task-item f-extend-calendar-task-item-level'+(item?.level || 1)
                        return <div class={statusClassName}>
                        <div class='f-extend-calendar-task-item-date'>
                            <div class='f-extend-calendar-task-item-date-start'>{getHours(item.startDate)}</div>
                            <div class='f-extend-calendar-task-item-date-end'>{getHours(item.endDate)}</div>
                        </div>
                        <div class='f-extend-calendar-task-item-task'>{item.task}</div>
                    </div>
                    })
                }
            </div>
        </>
    }
}